<template>
  <a-modal :width="500" :visible="visible" title="设置列表" @ok="handleOk" @cancel="cancel">
    <a-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 16 }">
      <a-form-item label="列表唯一值" v-bind="validateInfos.rowKey">
        <a-input
          placeholder="请输入列表唯一字段，方便vue优化渲染"
          v-model:value="modelRef.rowKey"
        />
      </a-form-item>
      <a-form-item label="是否需要分页" v-bind="validateInfos.hasPagination">
        <a-radio-group
          :options="[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]"
          v-model:value="modelRef.hasPagination"
        />
      </a-form-item>
      <template v-if="modelRef.hasPagination === 1">
        <a-form-item class="required" label="当前分页字段" v-bind="validateInfos.currentField">
          <a-input placeholder="请输入当前分页字段" v-model:value="modelRef.currentField"></a-input>
        </a-form-item>
        <a-form-item class="required" label="分页大小字段" v-bind="validateInfos.pageSizeField">
          <a-input
            placeholder="请输入分页大小字段"
            v-model:value="modelRef.pageSizeField"
          ></a-input>
        </a-form-item>
        <a-form-item class="required" label="总条数字段" v-bind="validateInfos.totalField">
          <a-input placeholder="请输入总条数字段" v-model:value="modelRef.totalField"></a-input>
        </a-form-item>
        <a-form-item class="required" label="分页大小" v-bind="validateInfos.pageSize">
          <a-input-number
            style="width: 100%"
            :min="1"
            placeholder="请输入分页大小"
            v-model:value="modelRef.pageSize"
          ></a-input-number>
        </a-form-item>
      </template>
    </a-form>
    <template #footer>
      <a-button key="back" @click="cancel">返回</a-button>
      <a-button @click="resetParams">重置参数</a-button>
      <a-button key="submit" type="primary" @click="handleOk">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRaw, toRefs } from 'vue';
import { useForm } from '@ant-design-vue/use';
import _ from 'lodash-es';
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object,
      default: () => ({
        hasPagination: 1,
        currentField: '',
        pageSizeField: '',
        totalField: '',
        rowKey: '',
        pageSize: 10,
      }),
    },
  },
  emits: ['update:value', 'update:visible', 'add-column'],
  setup(props, { emit }) {
    const { value } = toRefs(props);
    const state = reactive({
      modelRef: _.cloneDeep(value.value),
      rulesRef: {
        rowKey: [
          {
            required: true,
            message: '请输入唯一标识',
          },
        ],
        hasPagination: [
          {
            required: true,
            message: '是否需要分页',
            type: 'number',
          },
        ],
        currentField: [
          {
            validator() {
              if (state.modelRef.hasPagination === 1 && !state.modelRef.currentField) {
                return Promise.reject('请输入当前分页字段');
              } else {
                return Promise.resolve();
              }
            },
            trigger: 'blur',
          },
        ],
        pageSizeField: [
          {
            validator() {
              if (state.modelRef.hasPagination === 1 && !state.modelRef.pageSizeField) {
                return Promise.reject('请输入分页大小字段');
              } else {
                return Promise.resolve();
              }
            },
            trigger: 'blur',
          },
        ],
        totalField: [
          {
            validator() {
              if (state.modelRef.hasPagination === 1 && !state.modelRef.totalField) {
                return Promise.reject('请输入总分页字段');
              } else {
                return Promise.resolve();
              }
            },
            trigger: 'blur',
          },
        ],
        pageSize: [
          {
            validator() {
              if (state.modelRef.hasPagination === 1 && !state.modelRef.pageSize) {
                return Promise.reject('分页大小不得为空');
              } else {
                return Promise.resolve();
              }
            },
            trigger: 'blur',
            type: 'number',
          },
        ],
      },
    });

    const { resetFields, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);

    const handleOk = () => {
      validate()
        .then(() => {
          emit('update:value', _.cloneDeep(toRaw(state.modelRef)));
          emit('update:visible', false);
        })
        .catch(err => {
          console.log('error', err);
        });
    };

    const cancel = () => {
      emit('update:visible', false);
      resetFields();
    };

    const resetParams = () => {
      resetFields();
    };

    return {
      ...toRefs(state),
      validateInfos,
      resetParams,
      handleOk,
      cancel,
    };
  },
});
</script>
<style lang="less" scoped>
@import url('../index.less');
// TODO
</style>
